<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div class="signManage">
        <div class="opNoticeTop">
            <div>日常签到>统计</div>
        </div>
        <div class="signManageSearch">
            <div class="signManageSearchLeft">
                <div class="signManageSearchLeftList">
                    <div class="signManageSearchLeftListLeft">
                        选择月份：
                    </div>
                    <div class="signManageSearchLeftListRight">
                        <el-date-picker v-model="monthvalue" type="date" placeholder="选择日期" :picker-options="pickerOptions0">
                        </el-date-picker>
                    </div>
                </div>
                <div class="signManageSearchLeftList">
                    <div class="signManageSearchLeftListLeft">
                        发送人：
                    </div>
                    <div class="signManageSearchLeftListRight signManageSearchLeftListRightp" @click="setReceiverClick">
                        {{userInfoVal}}
                    </div>
                </div>
            </div>
            <div class="signManageSearchRight">
                <el-button type="primary" size="medium" @click="searchClick">查询</el-button>
                <el-button type="primary" size="medium" @click="exportClick">报表</el-button>
            </div>
        </div>
        <div class="signManageMap" id='container'>
        </div>
        <div class="openScreen" @click='openScreenClick()'>全屏展示</div>
        <!-- 选择人员或者部门弹出框 -->
        <v-addPelete :isupdatePop="updatePopShow" @affirm="affirmUserListsClick" @cancel="cancelUserListsClick" :userselectpop="userselectpopLists"></v-addPelete>
    </div>
</template>
<script>
    require("../../../../API/config.js");
    import { mapActions } from "vuex";
    import addPelete from "../../cModel/addDeptiUsers.vue";
    export default {
        components: {
            "v-addPelete": addPelete
        },
        data() {
            return {
                updatePopShow: false, // 人员选择列表
                userselectpopListsArr: {},
                userselectpopLists: {}, // 已选中的人员-编辑时使用
                userInfoVal: "选择部门或者人员", // 发送范围
                pickerOptions0: {
                    disabledDate(time) {
                        return Date.now() < time.getTime();
                    }
                }, // 时间禁止访问
                memberIdVals: "", // 成员id
                deptsIdVals: "", // 部门id
                monthvalue: "", // 时间
                memberIdCopy: "", // 成员id
                deptsIdCopy: "", // 部门id
                monthCopy: "", // 时间
                screenShow: false,  //全屏切换
                list: [],//日常签到用户足迹
            };
        },
        beforeRouteLeave(to, from, next) {
            mapFun.$emit('closeScreen')
            next(true)
        },
        mounted() {
            var self = this
            self.monthvalue = new Date()
            if (self.$route.query.show == 'everyday') {
                self.searchDailyClick()
            } else {
                self.searchOutClick()
            }
        },
        created: function () {
            this.oid = sessionStorage.getItem("orgId");
            this.uid = sessionStorage.getItem("userId");
        },
        methods: {
            // 选择成员
            setReceiverClick() {
                var self = this;
                this.$store.commit("setMutviewShow", true);
                this.updatePopShow = true;
                if (self.userselectpopListsArr) {
                    self.userselectpopLists = self.userselectpopListsArr;
                }
            },
            // 选择人员确认
            affirmUserListsClick(val) {
                var self = this;
                if (val) {
                    var deptListsArr = [];
                    var userListsArr = [];
                    var userStr = "";
                    if (val.userLists.length > 0 || val.deptLists.length > 0) {
                        if (val.userLists.length > 0) {
                            val.userLists.forEach(function (ele, ind) {
                                userListsArr.push(ele.memberId);
                            });
                            self.memberIdVals = userListsArr.join(","); // 成员id
                            userStr =
                                val.userLists[0].name + "等" + val.userLists.length + "个人员。";
                        }
                        var deptStr = "";
                        if (val.deptLists.length > 0) {
                            val.deptLists.forEach(function (ele, ind) {
                                deptListsArr.push(ele.id);
                            });
                            self.deptsIdVals = deptListsArr.join(","); // 部门id
                            deptStr =
                                val.deptLists[0].name + "等" + val.deptLists.length + "个部门。";
                        }
                        self.userselectpopListsArr = {};
                        self.userselectpopListsArr = val;
                        self.userInfoVal = "你选择了" + deptStr + userStr;
                    } else {
                        self.userselectpopListsArr = {};
                        self.memberIdVals = "";
                        self.deptsIdVals = "";
                        self.userInfoVal = "选择部门或者人员";
                    }
                } else {
                    self.userselectpopListsArr = {};
                    self.memberIdVals = "";
                    self.deptsIdVals = "";
                    self.userInfoVal = "选择部门或者人员";
                }
                this.$store.commit("setMutviewShow", false);
                this.updatePopShow = false;
            },
            // 选择人员取消
            cancelUserListsClick(val) {
                var self = this;
                if (val.userLists.length > 0 || val.deptLists.length > 0) {
                    self.userselectpopListsArr = val;
                }
                this.updatePopShow = false;
                this.$store.commit("setMutviewShow", false);
            },
            // 查询
            searchClick() {
                if (this.$route.query.show == 'everyday') {
                    this.searchDailyClick()
                } else {
                    this.searchOutClick()
                }
            },
            //日常足迹
            searchDailyClick() {
                var self = this
                var signDateStr
                if (self.monthvalue == null) {
                    self.monthvalue = new Date()
                }
                var timeStr = self.monthvalue
                var y, m, d;
                y = timeStr.getFullYear();
                m = timeStr.getMonth() + 1;
                m = m > 9 ? m : "0" + m;
                d = timeStr.getDate();
                d = d > 9 ? d : "0" + d;
                signDateStr = y + "-" + m + "-" + d
                self.getsignWebSignDailyfindMemberDayPosition(JSON.stringify({
                    orgId: sessionStorage.getItem('ORGID'),
                    signDate: signDateStr,
                    deptIds: self.deptsIdVals,
                    userIds: self.memberIdVals,
                })).then(data => {
                    if (data.statusCode = 200) {
                        self.memberIdCopy = self.memberIdVals
                        self.deptsIdCopy = self.deptsIdVals
                        self.monthCopy = signDateStr
                        self.list = []
                        if (data.data) {
                            data.data.forEach(ele => {
                                self.list.push({
                                    name: ele.name,
                                    profile: ele.profile ? ele.profile : null,  //头像
                                    address: ele.address,    //地址
                                    position: [ele.lng, ele.lat],//经纬度
                                })
                            })
                            self.getMapFun()
                        } else {
                            self.getMapFun()
                        }
                    } else {
                        self.$message({
                            type: "info",
                            message: data.statusMessage
                        });
                    }
                }).catch(msg => {
                    self.$message({
                        type: "info",
                        message: "服务器异常"
                    });
                })
            },
            //外出足迹
            searchOutClick() {
                var self = this
                var signDateStr
                if (self.monthvalue == null) {
                    self.monthvalue = new Date()
                }
                var timeStr = self.monthvalue
                var y, m, d;
                y = timeStr.getFullYear();
                m = timeStr.getMonth() + 1;
                m = m > 9 ? m : "0" + m;
                d = timeStr.getDate();
                d = d > 9 ? d : "0" + d;
                signDateStr = y + "-" + m + "-" + d
                self.getsignWebSignOutfindMemberDayPosition(JSON.stringify({
                    orgId: sessionStorage.getItem('ORGID'),
                    signDate: signDateStr,
                    deptIds: self.deptsIdVals,
                    userIds: self.memberIdVals,
                })).then(data => {
                    if (data.statusCode = 200) {
                        self.memberIdCopy = self.memberIdVals
                        self.deptsIdCopy = self.deptsIdVals
                        self.monthCopy = signDateStr
                        self.list = []
                        if (data.data) {
                            data.data.forEach(ele => {
                                self.list.push({
                                    name: ele.name,
                                    profile: ele.profile ? ele.profile : null,  //头像
                                    address: ele.address,    //地址
                                    position: [ele.lng, ele.lat],//经纬度
                                })
                            })
                            self.getMapFun()
                        } else {
                            self.getMapFun()
                        }
                    } else {
                        self.$message({
                            type: "info",
                            message: data.statusMessage
                        });
                    }
                }).catch(msg => {
                    self.$message({
                        type: "info",
                        message: "服务器异常"
                    });
                })
            },
            //创建地图
            getMapFun() {
                var self = this
                var arr = self.list
                //初始化地图对象，加载地图
                var map = new AMap.Map("container", { resizeEnable: true, zoom: 13 });
                var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
                if (arr.length > 0) {
                    for (var i = 0, marker; i < arr.length; i++) {
                        var marker
                        if (arr[i].profile) {
                            marker = new AMap.Marker({
                                map: map,
                                position: arr[i].position,
                                content: `<div class="markerMain"><div class="markerMain-s"><div class="markerMain-n"><img src="${arr[i].profile}" alt=""></div></div></div>`
                            });
                        }
                        else {
                            let nameStr = "";
                            if (arr[i].name.length > 2) {
                                nameStr = arr[i].name.slice(arr[i].name.length - 2, arr[i].name.length);
                            } else {
                                nameStr = arr[i].name;
                            }
                            marker = new AMap.Marker({
                                map: map,
                                position: arr[i].position,
                                content: `<div class="markerMain"><div class="markerMain-s"><div class="markerMain-n">${nameStr}</div></div></div>`
                            });
                        }
                    }
                }
                map.setFitView();
            },
            //全屏展示
            openScreenClick() {
                this.screenShow = true
                var obj = {
                    memberIdVals: this.memberIdCopy,
                    deptsIdVals: this.deptsIdCopy,
                    monthvalue: this.monthCopy,
                }
                if (this.$route.query.show == 'everyday') {
                    mapFun.$emit('openEverydayScreenFun', obj)
                } else {
                    mapFun.$emit('openOutScreenFun', obj)
                }
            },
            // 报表
            exportClick() {
                if (this.$route.query.show == 'everyday') {
                    this.$router.push({
                        path: "/home/sign/signManage"
                    });
                } else {
                    this.$router.push({
                        path: "/home/sign/signOut"
                    });
                }
            },
            ...mapActions([
                'getsignWebSignDailyfindMemberDayPosition',
                'getsignWebSignOutfindMemberDayPosition'
            ])
        },
        filters: {
            timeFun(val) {
                if (val) {
                    var standardTime = new Date(val * 1);
                    var y, m, d, h, f;
                    y = standardTime.getFullYear();
                    m = standardTime.getMonth() + 1;
                    m = m > 9 ? m : "0" + m;
                    d = standardTime.getDate();
                    d = d > 9 ? d : "0" + d;
                    h = standardTime.getHours();
                    h = h > 9 ? h : "0" + h;
                    f = standardTime.getMinutes();
                    f = f > 9 ? f : "0" + f;
                    return m + "-" + d;
                } else {
                    return "暂无";
                }
            },
            timeFuns(val) {
                if (val) {
                    var standardTime = new Date(val * 1);
                    var y, m, d, h, f;
                    y = standardTime.getFullYear();
                    m = standardTime.getMonth() + 1;
                    m = m > 9 ? m : "0" + m;
                    d = standardTime.getDate();
                    d = d > 9 ? d : "0" + d;
                    h = standardTime.getHours();
                    h = h > 9 ? h : "0" + h;
                    f = standardTime.getMinutes();
                    f = f > 9 ? f : "0" + f;
                    return y + "-" + m + "-" + d + " " + h + ":" + f;
                } else {
                    return "暂无";
                }
            },
            typeFun: function (val) {
                if (val == 1) {
                    return "部门";
                } else {
                    return "人员";
                }
            },
            weekFun(val) {
                if (val == 7) {
                    return "日";
                } else if (val == 1) {
                    return "一";
                } else if (val == 2) {
                    return "二";
                } else if (val == 3) {
                    return "三";
                } else if (val == 4) {
                    return "四";
                } else if (val == 5) {
                    return "五";
                } else if (val == 6) {
                    return "六";
                }
            },
        },
        watch: {
            searchsmemVal: function (val) {
                var self = this;
            }
        }
    };
</script>
<style scoped>
    .signDetailsListsBottom {
        width: 100%;
        border: 1px solid red;
        display: flex;
    }



    .signManageSearchRightSearch {
        width: 70px;
        height: 35px;
        cursor: pointer;
        border-radius: 3px;
        background-color: #288df0;
        text-align: center;
        line-height: 35px;
        color: #fff;
        margin-right: 15px;
    }

    .signManageSearchRightexport {
        width: 70px;
        cursor: pointer;
        height: 35px;
        border-radius: 3px;
        background-color: #288df0;
        text-align: center;
        line-height: 35px;
        color: #fff;
    }

    .signManageSearchLeftListLeft {
        width: 80px;
        height: 28px;
        line-height: 28px;
        text-align: right;
    }

    .signManageSearchLeftListRightp {
        padding-left: 5px;
        border: 1px solid #38adff;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 250px !important;
    }

    .signManageSearchLeftListRight {
        width: 150px;
        height: 28px;
        border-radius: 4px;
        line-height: 28px;
    }

    .signManageSearchLeftList {
        display: flex;
        margin-left: 35px;
        margin-top: 10px;
    }

    .signManageSearchRight {
        display: flex;
        margin-right: 45px;
        margin-top: 10px;
    }

    .signManageSearchLeft {
        display: flex;
    }

    .signManageSearch {
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }


    .signManageMainRighttLiOneNum {
        overflow: hidden;
        text-align: center;
        line-height: 50px;
    }

    .signManageMainRighttNavLi {
        width: 50px;
        float: left;
    }

    .signManageMap {
        min-height: 520px;
        width: 900px;
        margin: 0 auto;
        margin-top: 10px;
    }

    .openScreen {
        width: 90px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border: 1px solid black;
        background: white;
        border-radius: 4px;
        z-index: 100;
        position: absolute;
        right: 90px;
        bottom: 20px;
        cursor: pointer;
    }

    .signManage {
        position: relative;
        width: 100%;
        min-height: 600px;
        margin-bottom: 40px;
    }

    .opNoticeTop div {
        color: #303030;
        font-size: 14px;
        padding-top: 24px;
        padding-bottom: 12px;
        margin-left: 44px;
        width: calc(100% - 88px);
        border-bottom: 1px solid #d9d9d9;
    }

    .opNoticeTop {
        width: 100%;
    }
</style>